@import "ui-variables";

.preview-pane .preview-header {
  width: 100%;
  z-index: 1;
  padding: @component-padding ;
  font-family: @font-family-headlines;
  font-size: @font-size-h1;
  font-weight: bold;
  background-color: @base-background-color;
  border-bottom: none; // ow

  .preview-controls {
    font-family: @font-family;
  }
}

.results-view {
  padding: 0 @component-padding;
}

// Single search result
.results-view .list-tree > div {
  background-color: @input-background-color;
}

@marginBetweenResults: (@component-padding / 2);

.results-view .path-row {
  border-top: @marginBetweenResults solid @base-background-color;

  .icon {
    // right-align with line numbers
    margin-left: (@component-padding / 2);
    margin-right: (@component-padding / 2);
  }
}

.results-view .list-nested-item.selected:before {
  // since we add a border we must adjust the height of the list item
  height: @height__list-item + @marginBetweenResults;
}

// Overwrite internal styles that draw a line between row
.preview-pane .results-view .context-row.separator,
.preview-pane .results-view .match-row.separator {
  box-shadow: none;
}

.results-view .list-tree.has-collapsable-children {
  padding: 0;
}

.preview-pane .results-view .selected {
  > .line-number,
  > .preview,
  > .path-details.list-item.collapsed,
  .path-match-number {
    color: @text-color-selected;
  }
}

// Increase distance to search result in code
.preview-pane .results-view .line-number {
  border-right: 1px solid @base-border-color;
  margin-right: @component-padding / 2;
  min-width: @component-padding * 4; // width of a 5-digit number
  padding-right: @component-padding / 2;
}

.preview-pane .results-view .match-row.selected .line-number {
  color: @text-color-subtle;
}

// Name of the file the search result was found in
.results-view .path-details.list-item {
  padding: 0 @component-padding;

  .path-name {
    font-weight: bold;
  }

  .path-match-number {
    color: @text-color;
  }
}

.results-view .selected > .path-details.list-item {
  color: @text-color;
}

.preview-pane .results-view .list-tree .path {
  padding-left: 0;
}

// Don’t indent the list items
.results-view .list-tree.has-collapsable-children li.list-item {
  margin-left: 0;

  &.selected .preview {
    color: @text-color;
  }
}

// Hover over the list results in a different color
.results-view .search-result.list-item,
.results-view .path-details.list-item {
  &:hover {
    background-color: darken(@base-background-color, 3%);
  }
}

.results-view .search-result.list-item {
  margin-left: 0 !important;
}

.preview-header .highlight-info {
  padding: @component-padding / 4 @component-padding / 2;
}
